import { HeartFilled } from "@ant-design/icons";
import { Divider, Flex, FloatButton, Input, List, Skeleton } from "antd";
import { SearchProps } from "antd/es/input";
import { memo, useEffect, useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { Link, useNavigate } from "react-router-dom";
import { getHostList, getSquareList } from "../../network/api";
import { RouterPath } from "../../router";
import "./square.css";

const { Search } = Input;

const Square = () => {
  const [listTitlie, setListTitlie] = useState("近期分享");
  const [listData, setListData] = useState<any[]>([]);
  const [page, setPage] = useState({
    curPage: 0,
    total: 0,
  });

  useEffect(() => {
    loadMoreData();
  }, []);

  const loadMoreData = () => {
    getSquareList(page.curPage)
      .then((res: any) => {
        setPage({
          curPage: res.curPage,
          total: res.total,
        });
        setListData([...listData, ...res.datas]);
      })
      .catch((err) => {
        console.log("err", err);
      });
  };

  return (
    <Flex className="slayout">
      <Flex className="left" vertical>
        <Flex
          style={{
            height: "50px",
            backgroundColor: "white",
            paddingLeft: "18px",
          }}
          align="center"
        >
          <div
            style={{
              width: "5px",
              height: "5px",
              backgroundColor: "rgb(39, 102, 146)",
              borderRadius: "50px",
              marginRight: "4px",
            }}
          />
          <div>广场API已经完全开放：</div>
          <Link
            to={RouterPath.head_page}
            target="_blank"
            rel="noopener noreferrer"
          >
            点击直达
          </Link>
          <div>.</div>
        </Flex>
        <div
          style={{
            paddingLeft: "18px",
            height: "40px",
            lineHeight: "40px",
            fontSize: "16px",
            borderBottom: "1px solid rgb(39, 102, 146)",
            marginTop: "10px",
            backgroundColor: "white",
          }}
        >
          {listTitlie}
        </div>
        <InfiniteScroll
          dataLength={listData.length}
          next={loadMoreData}
          hasMore={listData.length < page.total}
          loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
          endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
          scrollableTarget="scrollableDiv"
        >
          <List
            dataSource={listData}
            renderItem={(item) => <ListItem item={item} key={item.link} />}
          />
        </InfiniteScroll>
      </Flex>
      <div className="right">
        <RightDiv />
      </div>
      <FloatButton.BackTop type="primary" />
    </Flex>
  );
};

export default memo(Square);

const ListItem = memo((props: any) => {
  const { item } = props;

  return (
    <Flex className="list_item">
      <HeartFilled className="item_icon" />
      <Flex style={{ marginLeft: "20px" }} vertical>
        <Link
          className="item_title"
          to={item.link}
          target="_blank"
          rel="noopener noreferrer"
        >
          {item.title}
        </Link>
        <Flex>
          {item.fresh ? (
            <div
              style={{
                color: "rgb(221, 48, 17)",
                border: "1px solid red",
                width: "20px",
                height: "18px",
                lineHeight: "18px",
                textAlign: "center",
                marginRight: "10px",
              }}
            >
              新
            </div>
          ) : (
            ""
          )}
          <div>{`分享人： ${item.shareUser}`}</div>
          <div style={{ marginLeft: "10px" }}>{item.niceShareDate}</div>
        </Flex>
      </Flex>
    </Flex>
  );
});

const RightDiv = memo(() => {
  const [tagData, setTagData] = useState<any[]>([]);
  const navigate = useNavigate();

  useEffect(() => {
    getHostList()
      .then((res: any) => {
        setTagData(res);
      })
      .catch((err) => {
        console.log("err", err);
      });
  }, []);

  const onSearch: SearchProps["onSearch"] = (value, _e, info) =>
    console.log(info?.source, value);

  return (
    <Flex vertical>
      <Search
        size="large"
        placeholder="搜索关键词以空格形式隔开"
        onSearch={onSearch}
        style={{
          width: "100%",
        }}
      />
      <Flex vertical style={{ marginTop: "10px", backgroundColor: "white" }}>
        <div
          style={{
            paddingLeft: "15px",
            lineHeight: "40px",
            marginTop: "10px",
            height: "40px",
            borderBottom: "1px solid rgb(39, 102, 146)",
          }}
        >
          大家都在搜
        </div>
        <Flex wrap style={{ width: "100%", margin: "8px 20px" }}>
          {tagData.map((item, index) => (
            <Link
              key={index}
              className="tag"
              to={`https://www.wanandroid.com/article/query?k=${item.name}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {item.name}
            </Link>
          ))}
        </Flex>
      </Flex>
    </Flex>
  );
});
